<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../layui/css/formSelects-v4.css">
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/vue.js"></script>

</head>
<body>
<div id="story">
    <input type="hidden" name="glId" id="glId" :value="garden_list.glId">
    <input type="hidden" :value="garden_list.glName" id="gradeName">
    <input type="hidden" :value="userName" id="userName">
    <h2>{{datae}}幼儿考勤管理管理</h2>
    <hr/>
    <hr/>
    <form action="" class="layui-form">
        <div class="layui-form-item">

            <div class="layui-inline">
                <label class="layui-form-label">年级</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <select id="grade" lay-filter="grade">
                        <option value="-1">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin-right: 0px;">
                <label class="layui-form-label" style="text-align: center;padding-right: 0px;padding-left: -10px;margin-left: -24px;">班级</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <select id="manage">
                        <option value="-1">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline" style="margin-right: 0px;">
                <label class="layui-form-label" style="width: 90px;">考勤开始日期</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" id="sign" name="sign" class="layui-input">
                </div>
            </div>
            <div class="layui-inline" style="margin-right: 0px;">
                <label class="layui-form-label" style="width: 90px;">考勤结束日期</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" id="b" name="b" class="layui-input">

                </div>
            </div>
            <button type="button" class="layui-btn" onclick="reloadData()" lay-submit="" lay-filter="demo1">查询</button>
        </div>
    </form>



    <table class="layui-hide" id="rList" lay-filter="rTable"></table>
</div>

<script>
    var table ;
    function reloadData(){
        //执行重载
        table.reload('rList', {
            page: {
                curr: 1 //重新从第 1 页开始
            }
            ,where: {
                gradeId:$("#grade").val(),
                "cmId":$("#manage").val(),
                "sign":$("#sign").val(),
                "b":$("#b").val()
            }
        });
    }

    layui.config({
        base: '../../layui/'
    }).extend({
        formSelects: 'formSelects-v4'
    });
    var form;
    layui.use(['table','form','formSelects','laydate'], function(){
        table = layui.table;
        form = layui.form;
        var select = layui.formSelects;
        var laydate = layui.laydate;

        table.render({
            elem: '#rList'
            ,url:'http://localhost:9999/KqInfo/Index?glId='+$("#glId").val()
            ,page: true
            ,even : true
            ,id : "rList"
            ,cellMinWidth: 80
            ,toolbar:"#toolbarDemo",
            defaultToolbar: []
            ,cols: [[
                {field:'hello',type:'checkbox'}
                ,{field:'aMid', title: '编号'}
                ,{field:'child',  title: '学号',templet:function (d) {
                        return d.child.pid;
                    }}
                ,{field:'child',  title: '幼儿姓名',templet:function (d) {
                        return d.child.pName;
                    }}
                ,{field:'child',  title: '性别',templet:function (d) {
                        return d.child.pSex;
                    }}
                ,{field:'child',  title: '联系方式',templet:function (d) {
                        return d.child.contact;
                    }}
                ,{field:'child',  title: '家庭住址',templet:function (d) {
                        return d.child.home;
                    }},
                {field:'dictionary',  title: '考勤状态',templet:function (d) {
                        return d.dictionary.name;
                    }},
                {toolbar: '#barDemo',title:'操作'}
            ]]
        });

        //监听行内的工具条
        table.on('tool(rTable)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent == 'qd') {
                if (data.dictionary.name == "未签"){
                $.get("http://localhost:9999/KqInfo/updDid",{aMid:data.aMid,did:22,apeople:$("#userName").val()},function (d) {
                    layer.msg('签到成功',{time:1000},function () {
                        table.reload('rList');
                    });
                })
                }else{
                    layer.msg('你已经签到,不能再签',{time:1000,anim: 6},function () {
                       /* table.reload('rList');*/
                    });
                }
            }
            if (layEvent == 'cd') {
                if (data.dictionary.name == "未签") {
                $.get("http://localhost:9999/KqInfo/updDid",{aMid:data.aMid,did:25,apeople:$("#userName").val()},function (d) {
                    table.reload('rList');
                })
                }else{
                    layer.msg('对不起,你已签到',{time:1000,anim: 6},function () {
                       /* table.reload('rList');*/
                    });
                }
            }
            if (layEvent === 'qj'){
                if (data.dictionary.name == "未签") {
                    $.get('yx.html?_'+new Date().getTime(),function (s) {
                        layer.open({
                            type : 1,
                            title : '填写原因',
                            scrollbar: false,
                            skin : 'layui-layer-molv',
                            anim:3,
                            area : '650px',
                            content:s,
                            btn : ['确定','取消'],
                            success:function(){
                                $("#aMid").val(data.aMid);
                                $("#apeople").val($("#userName").val())
                            },
                            yes : function () {
                                var layedit = layui.layedit;
                                layedit.sync(index);
                                var str = $("#add_r_form").serialize();
                                console.log(str);
                                $.get("http://localhost:9999/KqInfo/updDid",str,function () {
                                    layer.close(layer.index);
                                    table.reload('rList');
                                })
                            }
                        })
                    })
                }else{
                    layer.msg('对不起,你已请假不能请假了',{time:1000,anim: 6},function () {
                    });
                }
            } else if (layEvent === 'detail'){ //TODO 查看详情

            }
        });
        form.on('select(grade)', function(data){
            if (data.value != -1){
                $("#manage").empty();
                $.get("http://localhost:9999/Manage/manage2",{glId:$("#glId").val(),gradeId: data.value},function(data){
                    $.each(data,function(){
                        var opt = $("<option></option>").appendTo("#manage");
                        opt.text(this.cmName).val(this.cmId);
                    });
                    layui.form.render();
                });
            }else{
                $("#manage").empty();
                $.get("http://localhost:9999/Manage/manageIndex",{glId:$("#glId").val()},function(data){
                    $.each(data.data,function(){
                        var opt = $("<option></option>").appendTo("#manage");
                        opt.text(this.cmName).val(this.cmId);
                    });
                    layui.form.render();
                });
            }
        })
            var pd = false;
        //头工具栏事件
        table.on('toolbar(rTable)', function(obj){
            var h = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'batchqd':
                 if (h.data.length == 0){
                     layer.msg('请选择',{time:1000});
                 } else{
                     var cmidaa = "";
                     pd = false;
                     for (let i = 0; i < h.data.length; i++) {
                         cmidaa=cmidaa+h.data[i].aMid;
                         if (i < h.data.length-1){
                             cmidaa=cmidaa+",";
                         }
                         if (h.data[i].dictionary.name == "已签"){
                             pd = true;
                         }
                     }
                     if (pd){
                         layer.msg('对不起,你已签到',{time:1000,anim: 6},function () {
                             /* table.reload('rList');*/
                         });
                     } else {
                         $.get("http://localhost:9999/KqInfo/updDid2",{cmidaaa:cmidaa},function () {
                             layer.msg('签到成功',{time:1000},function () {
                                 table.reload('rList');
                             });
                         })
                     }

                 }


                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
            };
        });

    });
    var time9 = setInterval(function () {
        if ($("#glId").val() != ""){

            $.get("http://localhost:9999/Grade/gradeIndex",{gIId:$("#glId").val()},function(data){
                $.each(data,function(){
                    var opt = $("<option></option>").appendTo("#grade");
                    opt.text(this.gradeName).val(this.gradeId);
                });
                layui.form.render();
            });

            $.get("http://localhost:9999/Manage/manageIndex",{glId:$("#glId").val()},function(data){
                $.each(data.data,function(){
                    var opt = $("<option></option>").appendTo("#manage");
                    opt.text(this.cmName).val(this.cmId);
                });
                layui.form.render();
            });
            clearInterval(time9);
        }
    },100)
    var vm = new Vue({
        el:'#story',
        data:{
            garden_list:null,
            userName:null,
            datee:null
        },
        created:function () {
            var User_PermissionData = JSON.parse(sessionStorage.getItem("login_user"));
            this.garden_list = User_PermissionData.kmsUser.garden_list;
            this.userName = User_PermissionData.kmsUser.userName;
            this.datae = new Date().toLocaleDateString();
        },
    })
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="batchqd"><i class="layui-icon layui-icon-edit"></i> 批量签到</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a lay-event="qd"><i class="layui-icon layui-icon-edit"></i>&nbsp;签到</a>
    <a lay-event="kg">&nbsp;&nbsp;</a>
    <a lay-event="qj"><i class="layui-icon layui-icon-face-smile"></i>&nbsp;请假</a>
    <a lay-event="kga">&nbsp;&nbsp;</a>
    <a lay-event="cd"><i class="layui-icon layui-icon-face-cry"></i>&nbsp;迟到</a>
</script>

<script type="text/html" id="shifou">
    <input type="checkbox" name="locked" value="{{d.locked}}" title="启用" lay-filter="roleTable" {{d.locked == 1 ? 'checked' : ''}}>
</script>
<script>
    layui.use('laydate', function(){
        var laydate = layui.laydate;

        //常规用法
        laydate.render({
            elem: '#sign'
        });
        laydate.render({
            elem: '#b'
        });
    });
</script>

</body>
</html>